<template>
  <div ref="scrollBoxRef" class="demo-page">
    <qmp-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
      <qmp-cell v-for="item in state.list" :key="item" :title="item" />
    </qmp-list>
    <router-link to="/other">跳转其它页面</router-link>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'Home'
  })
</script>
<script lang="ts" setup>
  import { reactive } from 'vue'

  const state = reactive<{ list: number[]; loading: boolean; finished: boolean }>({
    list: [],
    loading: false,
    finished: false
  })

  const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
      for (let i = 0; i < 10; i++) {
        state.list.push(state.list.length + 1)
      }

      // 加载状态结束
      state.loading = false

      // 数据全部加载完成
      if (state.list.length >= 40) {
        state.finished = true
      }
    }, 1000)
  }
</script>
<style lang="less" scoped>
  .demo-page {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: var(--qmp-gray-3);
  }
</style>
